<template>
  <div>
    <div class="demo-image">
      <el-carousel :interval="2000" type="card" height="280px">
        <div class="block">
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <!--            <h3 class="medium">{{ item }}</h3>-->
            <el-image
              style="width: 100%; height: 100%"
              :src="item.idView" class="image"
              :fit="fit"></el-image>
          </el-carousel-item>
        </div>
      </el-carousel>
    </div>
    <div>
      <div id="main" style="width: 600px;height:400px; float: left;margin-left: 500px"></div>
      <div id="myChart" style="margin-left: 50px" :style="{width: '400px', height: '400px'}"></div>
    </div>
<!--    <div>-->
<!--      &lt;!&ndash;表格&ndash;&gt;-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <div><h1 style="color: deepskyblue">历史门诊</h1></div>-->
<!--          <el-table-->
<!--            :data="historyData"-->
<!--            stripe-->
<!--            style="width: 100%"-->
<!--          >-->
<!--            &lt;!&ndash;       全选&ndash;&gt;-->
<!--            <el-table-column-->
<!--              label="序号"-->
<!--              width="100">-->
<!--              <template slot-scope="scope">-->
<!--                {{scope.$index+1}}-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            &lt;!&ndash;          就诊状态:1未就诊,2已就诊,3:已退号0退号&ndash;&gt;-->
<!--            <el-table-column-->
<!--              prop="tstatus"-->
<!--              label="就诊状态"-->
<!--              width="180" >-->
<!--              <template slot-scope="scope">-->
<!--                <el-tag v-if="scope.row.tstatus==1">待接诊</el-tag>-->
<!--                <el-tag v-if="scope.row.tstatus==2" type="success">已接诊</el-tag>-->
<!--                <el-tag v-if="scope.row.tstatus!=1&&scope.row.tstatus!=2" type="danger">接诊状态异常</el-tag>-->

<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="pno"-->
<!--              label="患者编号"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="pname"-->
<!--              label="患者姓名"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="psex"-->
<!--              label="性别"-->
<!--              width="180">-->
<!--              <template slot-scope="scope">-->
<!--                <div>-->
<!--                  {{ scope.row.psex==1?'男':'女' }}-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="page"-->
<!--              label="年龄"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="pphone"-->
<!--              label="手机号码"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="ttype"-->
<!--              label="门诊类型"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="tdepar"-->
<!--              label="科室"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="rdoctor"-->
<!--              label="接诊医生"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="rstartDate"-->
<!--              label="接诊时间"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->
  </div>

</template>

<script>
export default {
  mounted(){
    this.myChart() //函数调用
    this.draw();

  },
  data(){
    return{
      historyData:[],
      multipleSelection: [],
      fit:'fill',
      fits: ['fill', 'fill', 'fill', 'fill', 'fill'],
      imgList: [
        {id:0,idView:'https://cdn1.yuntuku.top/yuntuku/11212121/6TcZ8aW4.png'},
        {id:1,idView: 'https://cdn1.yuntuku.top/yuntuku/11212121/RjMG6P7x.png'},
        {id:2,idView: 'https://cdn1.yuntuku.top/yuntuku/11212121/GezzQ0CB.png'},
        {id:3,idView:'https://cdn1.yuntuku.top/yuntuku/11212121/mZII6DQb.png'}
      ],
      url: [
        'https://cdn1.yuntuku.top/yuntuku/11212121/I4m3jhHr.png',
        'https://cdn1.yuntuku.top/yuntuku/11212121/U2PZHsZn.png',
      ]
    }
  },

  methods:{
    myChart(){
      let myChart= this.$echarts.init(document.getElementById('myChart'));
      myChart.setOption({
        title: {
          text: '                          患者来源省份数据',//标题
          textStyle: {
            color: '#2BFDA3'
          },
          x:'5%'
        },
        // 鼠标悬停显示的信息
        tooltip: {
          // 当tooltip的trigger为‘axis’时，显示多项数据内容数组
          trigger: 'axis',
          axisPointer: {  //默认为直线，可选为：'line' | 'shadow'
            type: 'shadow'  //阴影
          },
          formatter: "{b} <br> 人数: {c}人"
        },
        // 图例,每个图标最多仅有一个图例
        /*legend: {
            data: [date]
        },*/
        // 网格图
        grid: {
          left: '6%',
          right: '6%',
          bottom: '2%',
          containLabel: true
        },
        // X轴
        xAxis: {
          type: 'value',
          //  修改柱状图背景网格线颜色
          splitLine:{
            show: true,
            lineStyle: { //X轴网格线型样式
              color: "rgba(253,103,96,0.2)",
              width: 1,
              type: "soild"
            }
          },
          boundaryGap: [0, 0.01],
          min: 1,	//x轴最小值
          max: 30,  //x轴最大值
          interval: 20,
          // 坐标轴的标签
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',
              fontWeight: '80'
            }
          }
        },
        // Y轴
        yAxis: {
          type: 'category',
          data: ['新疆', '黑龙江', '广西', '江苏', '广东', '河北', '河南','上海','北京','西安'],
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 0,
            margin: 10,
            inside: false,
            textStyle: {
              color: '#fff',
              fontWeight: '50'
            }
          }
        },
        // 内容数据
        series: [{
          type: 'bar',    //类型
          barWidth : 12,//修改柱状图的宽度
          label: {    //图形上的文本标签
            normal: {
              show: true,
              // formatter: '{c}',
              formatter: function(v) {
                var val = v.data;
                if (val == 0) {
                  return '';
                }
                return val;
              }
            }
          },
          // 柱状图形显示的颜色
          itemStyle: {
            normal: {
              //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              color: function(params) {
                var index = params.dataIndex;
                var colorList = [
                  // 渐变颜色的色值和透明度
                  //透明度从0
                  ['rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(13,94,208,0)','rgba(255,155,15,0)','rgba(253,103,96,0)'],
                  //到透明度1 ,如果需要不同的颜色直接修改不同颜色即可
                  ['rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(13,94,208,0.6)','rgba(255,155,15,0.6)','rgba(253,103,96,0.6)']
                ];
                return {
                  colorStops: [{
                    offset: 0,   //颜色的开始位置
                    color: colorList[0][index] // 0% 处的颜色
                  },{
                    offset:0.6,    //颜色的结束位置
                    color: colorList[1][index] // 100% 处的颜色
                  }]
                }
              }
            }
          },
          data: [ 2, 5, 25, 16, 16,21,28,7 ,25,9]
        }]
      })
    },
    draw(){
      this.myChart = this.$echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '患者就诊分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '就诊科室',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 12, name: '儿科'},
              {value: 2, name: '外科'},
              {value: 4, name: '内科'},
              {value: 15, name: '呼吸科'},
              {value: 26, name: '全科 '}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      let _this = this; //注意，要将this进行指代，否则在click里面this指向发生了改变

      this.myChart.setOption(option);
      //点击事件
      this.myChart.on('click',function(params){
        _this.$alert(params, '问题详情', {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString:true,
          callback: action => {}
        });
      });

    },
    queryHistor(){
      let jwt=localStorage.getItem("jwt")
      this.$axios.get('api/patient/queryPatientAndRegister?',
        {headers:{"jwt":jwt}})
        .then(res=>{
          console.log(res.data);
          if (res.data.code==200){
            this.historyData=res.data.data
          }
        })
    },


  },
  created() {
    this.queryHistor();
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
